<template>
	<view>
		<!-- 使用自定义组件 -->
		<view>
			<view class="search-bar" @click="toSearch">
				<image src="/static/icons/search_nav_search_black@3x.png" class="search-pic"></image><text
					class="search">搜索</text>
			</view>
		</view>

		<!-- 滚动视图区域 -->
		<view class="cate-container">
			<!-- 使用自定义的搜索组件 -->
			<!-- 左侧滚动区域的视图:一级分类 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }">
				<block v-for="(item, i) in cateListLevelFirst" :key="i">
					<view :class="['scroll-view-item', i === active ? 'active' : '']" @click="activeChange(i,item)">
						{{ item.name }}
					</view>
				</block>
			</scroll-view>
			<!-- 右侧滚动区域的视图：二级分类 -->
			<scroll-view class="right-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }"
				:scroll-top="scrollTop">
				<!-- 二级分类的渲染 -->
				<view v-for="(item, i) in cateListLevelSecond" :key="i" @click="toGoodsList(item)">
					<image :src="item.imgUrl" class="item-img"></image>
					<view class="item-name">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				wh: 0, // 窗口的可用高度
				cateListLevelFirst: [], // 一级分类数据数组
				cateListLevelSecond: [], // 二级分类数据
				active: 0, // 默认被激活的索引项
				scrollTop: 0, // 滚动条距离顶部的距离
				parentId: null,
				homeActive: null,
				firstId: null
			}
		},
		onLoad(option) {
			// 调用小程序的 API 方法，获取到窗口的可用高度
			const systemInfo = uni.getSystemInfoSync()
			this.getCateListLevelFirst()
			// 获取到可用高度以后需要减 50 (自定义搜索组件的高度)，让滚动区域依然在可用高度以内(可用的窗口)之内滚动
			this.wh = systemInfo.windowHeight - 50
		},
		onHide() {
			// 移除从首页过来的缓存
			uni.removeStorageSync('activeIdx')
			uni.removeStorageSync('homeId')
		},
		onShow() {
			// 调用获取一级分类数据的方法

			this.active = uni.getStorageSync('activeIdx') ? uni.getStorageSync('activeIdx') : 0

			if (!uni.getStorageSync('activeIdx')) {
				// console.log(this.cateListLevelFirst[0]._id)
				// this.getCateListLevelSecond(this.cateListLevelFirst[0]._id)
			} else {
				this.active = uni.getStorageSync('activeIdx')
				this.getCateListLevelSecond(uni.getStorageSync('homeId'))
			}

			if (uni.getStorageSync('act')) {
				this.active = uni.getStorageSync('act')
			}
		},
		methods: {
			// 跳转到搜索页面
			toSearch() {
				if (JSON.stringify(this.userInfo) !== '{}') {
					uni.navigateTo({
						url: "/subpkg/search/search"
					})
				} else {
					uni.switchTab({
						url: '/pages/my/my'
					})
					uni.$showMsg('请先登录!')
				}
			},

			// 激活对应的分类
			activeChange(index, item) {
				this.active = index
				// 点击一级分类的时候，缓存下来 ，为了返回的时候使用
				uni.setStorageSync('act', index)
				this.getCateListLevelSecond(item._id)
				// 动态切换 滚动条距离顶部的距离，因为让 滚动条在 0 和 0 之间切换，没有任何的效果，等于没设置一样
				// 所以只要设置一个 和 0 最近的数字进行动态切换即可，让用户感知不到有距离
				this.scrollTop = this.scrollTop === 0 ? 0.1 : 0
			},

			// 获取一级分类数据
			async getCateListLevelFirst() {
				const {
					data: res
				} = await uni.$http.post('/product/getFirstType')
				// console.log(res)
				this.cateListLevelFirst = res.data.reverse()
				// 不是从首页过来
				if (!uni.getStorageSync('activeIdx')) {
					console.log(this.cateListLevelFirst[0]._id)
					this.getCateListLevelSecond(this.cateListLevelFirst[0]._id)
				} else {
					// 从首页过来的
					console.log(uni.getStorageSync('activeIdx'), uni.getStorageSync('homeId'))
					this.active = uni.getStorageSync('activeIdx')
					
					this.getCateListLevelSecond(uni.getStorageSync('homeId'))
					console.log(uni.getStorageSync('homeId'), 22)
				}
			},
			// 获取二级分类数据
			async getCateListLevelSecond(id) {
				const {
					data: res
				} = await uni.$http.post('/product/getSecondType', {
					parentId: id
				})
				// console.log(res, id)
				this.cateListLevelSecond = res.data
			},
			// 点击二级分类，去商品列表
			toGoodsList(goods) {
				// console.log(goods._id)
				uni.navigateTo({
					url: `/subpkg/goods-list/goods-list?id=` + goods._id
				})
			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.search-bar {
		width: 702rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #F0F0F0;
		border-radius: 30rpx;
		margin: auto;
		margin-top: 20rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;

		.search {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}

		.search-pic {
			width: 31rpx;
			height: 30rpx;
			vertical-align: middle;
			margin-right: 15rpx;
		}
	}

	.cate-container {
		display: flex;

		.left-scroll-view {
			width: 203rpx;

			.scroll-view-item {
				height: 60px;
				width: 203rpx;
				line-height: 60px;
				text-align: center;
				font-size: 30rpx;
				font-weight: 500;
				color: #212121;
				// background-color: #F7F7F7;

				&.active {
					// background-color: #FFFFFF;
					position: relative;

					&::before {
						content: ' ';
						display: block;
						width: 51rpx;
						height: 6rpx;
						position: absolute;
						bottom: 25rpx;
						transform: translateX(-50%);
						left: 50%;
						background-color: #C00000;
					}
				}
			}
		}

		.right-scroll-view {

			.cate-level-list {
				display: flex;
				flex-wrap: wrap;

				.cate-level-img {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 33.33%;
					margin-bottom: 12px;
				}
			}
		}
	}

	.item-img {
		width: 523rpx;
		height: 228rpx;
		margin-top: 47rpx;
		border-radius: 8rpx;
	}

	.item-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #111111;
		text-align: center;
		padding-right: 24rpx;
		box-sizing: border-box;
	}
</style>
